London | 26-Jan | Gloria Mankrado | Sprint 2 | form control updated#1090
London | 26-Jan | Gloria Mankrado | Sprint 2 | form control updated#1090gloriamanks wants to merge 2 commits intoCodeYourFuture:mainfrom
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This comment has been minimized.
This comment has been minimized.
gloriamanks
changed the title
gloriamanks
added
the
Needs Review
Form-Controls/index.html
Outdated
|
|
||
| <div> | ||
| <label for="name">Name</label> | ||
| <input type="text" name="name" id="name" placeholder="username" minlength="2" required/> |
There was a problem hiding this comment.
Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?
Form-Controls/index.html
Outdated
| <label for="red">Red</label> | ||
| <input type="radio" name="colour" id="red" value="red" required /> |
There was a problem hiding this comment.
Can consider wrapping the input element inside the label tags:
<label>
Red
<input type="radio" name="colour" value="red" required />
</label>
This way, we don't need to use the id and for attributes.
There was a problem hiding this comment.
Hi @cjyuan ,
Below are the changes i have made according to the feedback given:
- I’ve wrapped the colour inputs inside their labels
- I’ve also added additional requirements to the name field to prevent the issue " " referred.
Regarding the remaining Lighthouse warning, without using CSS it isn’t possible to increase the physical size of form controls, so I’ve applied the best possible HTML-only solution. According to the bot, however, this scores 100 on Accessibility
cjyuan
added
Reviewed
2 participants
Learners, PR Template
Self checklist
Changelist
##FEEDBACK UPDATES
I’ve wrapped the colour radio inputs inside their labels to improve accessibility and increased the clickable area. I’ve also added a pattern attribute to the name field to prevent space-only input.
Regarding the remaining Lighthouse warning, without using CSS it isn’t possible to increase the physical size of form controls, so I’ve applied the best possible HTML-only solution.
Questions
I have none at the moment.